<template>
    <MyDialog :dialogForm="dialogForm" :dialogVisible="dialogVisible" @listenClose="onClose" @listenConfirm="onSubmit">
        <template #dialogBox>
            <MyForm :formData="formData" @listenClick="listenClick" :isClose="isClose" :isSubmit="isSubmit"
                :isDialogVisible="dialogVisible">
            </MyForm>
        </template>
    </MyDialog>
</template>
<script setup lang='ts'>
import { ref, reactive, watch, getCurrentInstance, computed } from 'vue'
import { ParentForm } from '@/interface/index'
import MyDialog from '@/components/MyDialog.vue'
import { FunTime } from '@/global/methods'
import { ElMessage } from 'element-plus'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
import { addUserApi, editUserApi, getAreaListApi, getTownApi, turnOffApi, userDetailApi } from '@/views/account/api/accountApi'
import { SelectObj } from '@/interface/index'
import { AddUserParams, EditUserParams } from '@/views/account/interface/interface'
const router = useRouter()
const store = useStore()
const { proxy } = getCurrentInstance() as any;

const dialogVisible = ref<boolean>(false)//弹窗是否出现
const isClose = ref<boolean>(false)//弹窗点击关闭 触发表单取消校验提示 
const isSubmit = ref<boolean>(false)//弹窗点击确定 触发表单确定

const dialogForm = {
    width: '30%',
    title: '账号转出'
}
interface PropsDialog {
    isShowDialog: boolean;//弹窗是否出现
    dialogData?: any
}
const props = withDefaults(defineProps<PropsDialog>(), {
    isShowDialog: false,
});
//封装的表单
const formData = reactive<ParentForm>({
    formItem: [
        { key: 'userName', styleType: 'inputDis', label: '姓名', value: '', disabled: true },
        { key: 'userLogin', styleType: 'inputDis', label: '手机号码', value: '', placeholder: '请输入手机号码', type: 'number', disabled: true },
        { key: 'townId', styleType: 'select', label: '转出至', value: '', data: [] },
    ],
    rules: {
        townId: [{ required: true, message: '请选择', trigger: 'change' }],
    },
    size: 'large',//'large' | 'default' | 'small'
})
//监控弹窗是否出现
watch(
    () => props.isShowDialog,
    () => {
        onUserDetail()
        onAreaList()
    }
)
//弹窗关闭事件
const onClose = () => {
    isClose.value = !isClose.value
    // props.dialogData.administratorFlag=0
}
//弹窗确定事件
const onSubmit = () => {
    isSubmit.value = !isSubmit.value
}
//表单取消校验 关闭弹窗
const listenMyClose = () => {
    dialogVisible.value = !dialogVisible.value
}
//表单确定  调接口
const listenMySubmit = (formData: any) => {
    let obj = JSON.stringify(formData)
    let val = JSON.parse(obj)
    let params = val
    //编辑
    params.userId = props.dialogData.userId
    onEdit(params)
}
//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = { 'listenMyClose': listenMyClose, 'listenMySubmit': listenMySubmit }
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
    objFun[name](val)
}
//获取用户当前所在镇之外的其他镇 
const onAreaList = async () => {
    try {
        let params = { userId: props.dialogData.userId }
        let res = await getTownApi(params)
        if (res?.code === 0) {
            let arr: SelectObj[] = []
            res.data.forEach(t => {
                arr.push({ label: t.name, value: t.areaCode })
            })
            if (props.dialogData?.userId) {
                formData.formItem[2].data = arr
            }
        }
        store.commit('loading/setLoad', false)
    } catch {
        store.commit('loading/setLoad', false)
    }
}
//查详情 用户信息
const onUserDetail = async () => {
    try {
        let params = { id: props.dialogData.userId }
        let res = await userDetailApi(params)
        if (res?.code === 0) {
            formData.formItem.forEach(t => {
                let formObj = res.data
                if (t.key === 'townId') {
                    t.value = ''
                } else {
                    t.value = formObj[t.key] ? formObj[t.key] : ''
                }
            })
            dialogVisible.value = !dialogVisible.value
        }
        store.commit('loading/setLoad', false)
    } catch {
        store.commit('loading/setLoad', false)
    }
}

//转出提交接口any 写成对应的接口
const onEdit = async (params: EditUserParams) => {
    try {
        console.log(params);
        let res = await turnOffApi(params)
        if (res?.code === 0) {
            dialogVisible.value = !dialogVisible.value
            ElMessage({ type: 'success', message: '转出成功' })
            store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])
        }
        store.commit('loading/setLoad', false)
    } catch {
        store.commit('loading/setLoad', false)
    }
}
</script>
<style scoped lang='scss'>

</style>